<template>
    <div class="draw-fa">
        <div class="top">
            <img class="draw-tu" src="../../../../public/img/关注标题.png" alt="">
        </div>
        <div class="middle">
            <img class="middle-tu" src="../../../../public/img/化妆品.webp" alt="">
            <img class="middle-tu" src="../../../../public/img/化妆品.webp" alt="">
            <img class="middle-tu" src="../../../../public/img/化妆品.webp" alt="">
        </div>
        <h3 class="draw-title">影视-人物</h3>

        <div class="draw-public">
            <img class="pub-tu" src="../../../../public/img/设计趋势01.png" alt="">
            <div class="pub-name">猫九九</div>
        </div>
        <div class="good">
            <div class="gone" style="font-size: 25px;">★ </div>
            <div class="gtext"> 关注</div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
    .draw-fa {
        width: 240px;
        height: 371px;
        border-radius: 10px;
        background-color: white;

        .top {
            width: 240px;
            height: 160px;
            border-radius: 10px 10px 0px 0px;


            .draw-tu {
                width: 240px;
                height: 160px;
            }

        }

        .middle {
            width: 240px;
            height: 78px;
            border: 1px solid salmon;
            display: flex;
            justify-content: space-between;
            margin-top: 5px;

            .middle-tu {
                width: 78px;
                height: 78px;

            }
        }

        .draw-public {
            width: 240px;
            height: 24px;
            display: flex;


            .pub-tu {
                width: 17px;
                height: 17px;
                margin-top: 4px;
                border-radius: 20px;
            }

            .pub-name {
                width: 49px;
                height: 24px;
                font-size: 12px;
                text-align: center;
                line-height: 24px;
                color: rgb(109, 110, 112);
            }
        }

        /* .. */
        .good {
            width: 240px;
            height: 40px;
            background-color: rgb(255, 89, 103);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            text-align: center;
            color: white;
            line-height: 40px;
        }
    }
</style>